<template>
  <ElDialog v-model="dialogVisible" title="回退" width="500">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="110px"
    >
      <el-form-item label="回退节点" prop="rollbackId">
        <el-select v-model="formData.rollbackId" placeholder="" clearable style="width: 100%">
          <el-option
            v-for="(item, index) in userList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
            :disabled="index + 1 === userList.length"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </ElDialog>
</template>
<script lang="ts" setup>
  // import * as TaskApi from '/@/api/bpm/task';
  import { rollbackTask } from '/@/api/backs/workFlow/process';
  import { ElDialog } from 'element-plus';

  import { ref } from 'vue';
  defineOptions({ name: 'BpmTaskUpdateAssigneeForm' });

  const dialogVisible = ref(false); // 弹窗的是否展示
  const formLoading = ref(false); // 表单的加载中
  const formData = ref({
    id: '',
    rollbackId: undefined,
  });
  const formRules = ref({
    rollbackId: [{ required: true, message: '回退节点不能为空', trigger: 'change' }],
  });

  const formRef = ref(); // 表单 Ref
  const userList = ref<any[]>([]); // 用户列表

  /** 打开弹窗 */
  const open = async (id: string, activityList: any) => {
    console.log(id);
    dialogVisible.value = true;
    let acList = activityList.filter((item) => {
      return item.type === 'userTask';
    });
    acList.forEach((item) => {
      item.id = item.taskId;
      item.nickname = item.key;
    });
    resetForm();
    formData.value.id = id;
    userList.value = acList;
  };
  defineExpose({ open }); // 提供 openModal 方法，用于打开弹窗

  /** 提交表单 */
  const emit = defineEmits(['success']); // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {
    // 校验表单
    if (!formRef.value) return;
    const valid = await formRef.value.validate();
    if (!valid) return;
    // 提交请求
    formLoading.value = true;
    try {
      await rollbackTask(formData.value);
      dialogVisible.value = false;
      // 发送操作成功的事件
      emit('success');
    } finally {
      formLoading.value = false;
    }
  };

  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      id: '',
      rollbackId: undefined,
    };
    formRef.value?.resetFields();
  };
</script>
